<template>
	<view class="container">
		<textarea auto-height placeholder-style="color: #cccccc" :maxlength="maxLength" :focus="focus" v-model="content" :placeholder="placeholder" />
		<view class="count">
			<text>{{ content.length }}</text>
			<text>/</text>
			<text>{{ maxLength }}字</text>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
	value: [String, Number],
	placeholder: {
		type: String,
		default: '请输入内容～'
	},
	focus: Boolean,
	maxLength: {
		type: [String, Number],
		default: 500
	}
});

const emit = defineEmits(['update:value']);

const content = ref('');

watch(
	() => props.value,
	v => {
		content.value = v;
	}
);

watch(() => content.value, v => emit('update:value', v));
</script>

<style lang="scss">
.container {
	padding: 5rpx;
	textarea {
		width: 100%;
		margin-bottom: 20rpx;
		min-height: 300rpx;
	}
	.count {
		display: flex;
		font-size: 26rpx;
		color: #cccccc;
		justify-content: flex-end;
	}
}
</style>
